<template>
  <el-card>
    <div slot="header" class="header">
      <span>店铺管理</span>
      <el-button @click="handleEdit" :type="canEdit ? 'success' : 'primary'" size="small">{{ canEdit ? '保存' : '编辑' }}</el-button>
    </div>
    <div class="content">
      <el-form :disabled="!canEdit" :model="shopForm" size="small" label-width="100px">
        <el-form-item label="店铺名称">
          <el-input v-model="shopForm.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺公告">
          <el-input rows="10" v-model="shopForm.bulletin" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="店铺头像">
          <el-upload class="avatar-uploader" :file-list="fileList" action="https://jsonplaceholder.typicode.com/posts/">
            <img v-if="shopForm.avatar" :src="API + '/upload/shop/' + shopForm.avatar" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="店铺图片">
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" :file-list="shopForm.pics" list-type="picture-card">
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="配送费用">
          <el-input-number v-model="shopForm.deliveryPrice"></el-input-number>
        </el-form-item>
        <el-form-item label="配送时间">
          <el-input-number v-model="shopForm.deliveryTime"></el-input-number>
        </el-form-item>
        <el-form-item label="配送描述">
          <el-input v-model="shopForm.description"></el-input>
        </el-form-item>
        <el-form-item label="店铺评分">
          <el-rate v-model="shopForm.score" disabled show-score text-color="#ff9900"> </el-rate>
        </el-form-item>
        <el-form-item label="店铺销量">
          <el-input-number v-model="shopForm.sellCount"></el-input-number>
        </el-form-item>
        <el-form-item label="店铺活动">
          <el-checkbox-group v-model="shopForm.supports">
            <el-checkbox label="在线支付满28减5" name="type"></el-checkbox>
            <el-checkbox label="VC无限橙果汁全场8折" name="type"></el-checkbox>
            <el-checkbox label="单人精彩套餐" name="type"></el-checkbox>
            <el-checkbox label="特价饮品8折抢购" name="type"></el-checkbox>
            <el-checkbox label="单人特色套餐" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-picker is-range v-model="shopForm.date" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围"> </el-time-picker>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
// :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
import { getShop } from '@/api/shop'
export default {
  data() {
    return {
      API: 'http://127.0.0.1:5000',
      canEdit: false,
      shopForm: {
        name: '',
        bulletin: '',
        avatar: '',
        deliveryPrice: 0,
        deliveryTime: 0,
        description: '',
        score: 0,
        sellCount: 0,
        supports: [],
        pics: [],
        date: []
      },
      fileList: [{}]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      let { data } = await getShop()

      // 回填之前处理图片格式
      data.data.pics = data.data.pics.map(v => {
        return {
          mame: v,
          url: this.API + '/upload/shop/' + v
        }
      })
      this.shopForm = data.data
      console.log(data.data)
    },
    // 编辑
    handleEdit() {
      this.canEdit = !this.canEdit
      if (!this.canEdit) {
        console.log('发送ajax')
        console.log(this.shopForm)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-form {
  width: 750px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
